<template>
  <div class="infinite-container">
    <div class="select-time-weekday bgwhite">
        <div class="time-fullday" style="overflow:hidden;">
          <mu-flexbox :gutter="0">
            <mu-flexbox-item grow="1" class="t3 bgwhite"><i class="iconfont icon-left"/></mu-flexbox-item>
            <mu-flexbox-item grow="18" style="overflow:hidden;" > 
              <div ref="scrollWrapper">
                    <ul :style="'width:'+scrollWrapperWidth+'px;'">
                      <li v-for="(day, index) in daysAM"
                      :style="'width:'+liWidth+'px;'"
                          :key="index" 
                          :class="{'active': day.activeClass}" 
                          @click="dayClick(day, index)">
                            <div>{{day.orderWeek2}}</div>
                            <div class="t3">{{day.orderDate1}}</div>
                      </li>
                    </ul>
              </div>
            </mu-flexbox-item>
            <mu-flexbox-item grow="1" class="t3 bgwhite"><i class="iconfont icon-small-arrow-right"/></mu-flexbox-item>
          </mu-flexbox>
        </div>
    </div>
  
    <div class="bgwhite doctors-wrapper" v-if="doctors.length > 0">
      <DoctorItem v-for="item in doctors"
                  :key="item.doctorCode" 
                  :item="item" 
                  :flag="dayClickFlag"
      >
      </DoctorItem>
    </div>
    <div class="not-found"  v-else>  
        <div>暂无数据</div>
    </div>

  </div>
</template>
<script>
import {getWeekName} from '@/common/js/util'
import {commonAjax} from '@/api/api'
import DoctorItem from '@/components/DoctorItem.vue'
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      daysAM: [],
      doctors: [],
      dayClickFlag: false,
      open: false,
      dept: JSON.parse(localStorage.dept),
      scrollWrapperWidth: '400',
      liWidth: '54'
    }
  },
  mounted () {
    this.scrollWrapperWidth = this.liWidth * this.daysAM.length
    this.$nextTick(() => { this._initScroll() })
    this.getTime()
    // 获取医生列表
    this.getDoctors()
  },
  methods: {
    dayClick (day, index) {
      this.daysAM.forEach(day => { day.activeClass = false })
      localStorage.currentDay = day.date
      day.activeClass = true
      // 开启点击按钮弹出挂号
      this.dayClickFlag = true
      // 按照日期过滤数据
      this.getDoctors(day.date)
    },
    getTime () {
      this.$store.commit('UPDATE_HEADERSHOW')
      // 获取排版周期
      commonAjax('appointment/listScheduleCycle', {}, true).then(res => {
        if (res.data.code === 1) {
          let d1 = res.data.data
          d1.forEach(day => {
            day.orderDate1 = day.date.slice(5)
            day.orderWeek2 = getWeekName(day.week)
            day.activeClass = false
          })
          this.daysAM = d1
          this.scrollWrapperWidth = this.daysAM.length * this.liWidth
          this.$nextTick(() => { this._initScroll() })
        }
      }).catch(res => {
        console.warn(res)
      })
    },
    getDoctors (day = '') {
      let params = {
        departmentCode: this.dept.departmentCode,
        scheduleDate: day,
        outpatientTpye: 1
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax('appointment/listDoctor', params, true).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.doctors = res.data.data || []
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        console.log(res)
      })
    },
    toggle () {
      this.open = !this.open
    },
    goBack () {
      window.history.back()
    },
    _initScroll () {
      this.scroll = new BScroll(this.$refs.scrollWrapper, {
        click: true,
        scrollX: true
      })
    }
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_HEADERSHOW')
  },
  components: {
    DoctorItem
  }
}
</script>
<style lang="less">
@import '../../common/css/vars.less';
.select-time-weekday {
  border-bottom: 1px solid @color-border;
  .time-fullday {
    height: 50px;
    li {
      float: left;
      border-right: 1px solid @color-border;
      border-bottom: 1px solid @color-border;
      padding: .3em;
      text-align: center;
      &.active {
        background: @color-primary;
        color: #fff;
        .t3 {
          color: #fff;
        }
      }
      &:nth-child(n+9) {
        border-bottom: none;
      }
    }
  }
}
.doctors-wrapper {
  position: absolute;
  top: 51px;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
}
</style>
